import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const Myapp());
}

class Myapp extends StatelessWidget {
  const Myapp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'sss',
      home: Scaffold(
        body: Column(
          children: [
            HomePage(),
            Mybutton(),
          ],
        ),
      ),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        /// 元素内部，也就是child元素的方位
        alignment: Alignment.center,

        /// 尺寸是基于自己container本身的大小的
        ///
        width: 200,
        height: 200,

        /// 约束的也是container自己本身
        decoration: BoxDecoration(
            color: Colors.red,
            border: Border.all(color: Colors.blue, width: 5),
            borderRadius: BorderRadius.circular(15),

            /// container组件周围的阴影
            boxShadow: const [
              BoxShadow(color: Colors.green, blurRadius: 10),
            ],

            /// container内部渐变，一般是从左到右的
            gradient: const RadialGradient(colors: [Colors.red, Colors.yellow])
            // 线性渐变， 一般是从左到右的
            // gradient: const LinearGradient(colors: [Colors.red, Colors.yellow]),
            ),

        /// 非约束盒子控件，所以子控件不会依赖父控件的约束，他依然按照默认的
        /// 排列进行排列
        child: const Text('this is demo'),
      ),
    );
  }
}

/// 利用container自定义实现一个按钮
class Mybutton extends StatefulWidget {
  const Mybutton({super.key});

  @override
  State<Mybutton> createState() => _MybuttonState();
}

class _MybuttonState extends State<Mybutton> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('sssss'),
        ),
        body: Center(
          child: Container(
              // alignment: Alignment.center,
              margin: const EdgeInsets.only(top: 20),
              padding: const EdgeInsets.all(5),
              // color: Colors.blueGrey,
              width: 100,
              height: 50,
              decoration: BoxDecoration(
                color: Colors.purple,
                borderRadius: BorderRadius.circular(10),
              ),
              child: const Column(
                children: [
                  Text('按钮111'),
                  Text('按钮222'),
                ],
              )),
        ));
  }
}
